/*
 * jQuery Growl plugin
 * Version 1.0.0-b3 (09/04/2008)
 * @requires jQuery v1.2.3 or later
 *
 * Examples at: http://fragmentedcode.com/jquery-growl
 * Copyright (c) 2008 David Higgins
 * 
 * Special thanks to Daniel Mota for inspiration:
 * http://icebeat.bitacoras.com/mootools/growl/
 */

/*
USAGE:

	$.growl(title, msg);
	$.growl(title, msg, image);
	$.growl(title, msg, image, priority);

THEME/SKIN:

You can override the default look and feel by updating these objects:
$.growl.settings.displayTimeout = 4000;
$.growl.settings.noticeTemplate = ''
  + '<div>'
  + '<div style="float: right; background-image: url(my.growlTheme/normalTop.png); position: relative; width: 259px; height: 16px; margin: 0pt;"></div>'
  + '<div style="float: right; background-image: url(my.growlTheme/normalBackground.png); position: relative; display: block; color: #ffffff; font-family: Arial; font-size: 12px; line-height: 14px; width: 259px; margin: 0pt;">' 
  + '  <img style="margin: 14px; margin-top: 0px; float: left;" src="%image%" />'
  + '  <h3 style="margin: 0pt; margin-left: 77px; padding-bottom: 10px; font-size: 13px;">%title%</h3>'
  + '  <p style="margin: 0pt 14px; margin-left: 77px; font-size: 12px;">%message%</p>'
  + '</div>'
  + '<div style="float: right; background-image: url(my.growlTheme/normalBottom.png); position: relative; width: 259px; height: 16px; margin-bottom: 10px;"></div>'
  + '</div>';
$.growl.settings.noticeCss = {
  position: 'relative'
};

To change the 'dock' look, and position: 

$.growl.settings.dockTemplate = '<div></div>';
$.growl.settings.dockCss = {
    position: 'absolute',
    top: '10px',
    right: '10px',
    width: '300px'
  };
  
The dockCss will allow you to 'dock' the notifications to a specific area
on the page, such as TopRight (the default) or TopLeft, perhaps even in a
smaller area with "overflow: scroll" enabled?
*/

(function($)
{

    $.growl = function(title, message, image, priority) { notify(title, message, image, priority); }
    $.growl.version = "1.0.0-b2";

    function create(rebuild)
    {
        var instance = document.getElementById('growlDock');
        if (!instance || rebuild)
        {
            instance = $(jQuery.growl.settings.dockTemplate).attr('id', 'growlDock').addClass('growl');
            if (jQuery.growl.settings.defaultStylesheet)
            {
                $('head').append('<link rel="stylesheet" type="text/css" href="' + jQuery.growl.settings.defaultStylesheet + '" />');
            }
        }
        else
        {
            instance = $(instance);
        }
        $('body').append(instance.css(jQuery.growl.settings.dockCss));
        return instance;
    };

    function r(text, expr, val)
    {
        while (expr.test(text))
        {
            text = text.replace(expr, val);
        }
        return text;
    };

    function notify(title, message, image, priority)
    {
        var instance = create();
        var html = jQuery.growl.settings.noticeTemplate;
        var elem = $(html);
        if (typeof (html) == 'object')
        {
            html = elem.html();
        }

        html = r(html, /%message%/, (message ? message : ''));
        html = r(html, /%title%/, (title ? title : ''));
        html = r(html, /%image%/, (image ? image : jQuery.growl.settings.defaultImage));
        html = r(html, /%priority%/, (priority ? priority : 'normal'));
        elem.html(html);
        var notice = elem
		.hide()
		.css(jQuery.growl.settings.noticeCss)
		.fadeIn(jQuery.growl.settings.notice); ;

        $.growl.settings.noticeDisplay(notice);
        instance.append(notice);
        if ($.growl.settings.displayTimeout > 0)
        {
            setTimeout(function()
            {
                jQuery.growl.settings.noticeRemove(notice, function()
                {
                    notice.remove();
                });
            }, jQuery.growl.settings.displayTimeout);
        }
    };


    // default settings
    $.growl.settings =
{
    dockTemplate: '<div></div>',
    dockCss:
	{
	    position: 'fixed',
	    top: '10px',
	    right: '10px',
	    width: '300px',
	    zIndex: 50000
	},
    noticeTemplate:
		'<div class="notice">' +
		' <h3 style="margin-top: 15px">%title%</h3>' +
		' <p>%message%</p>' +
		'</div>',
    noticeCss:
	{
	    opacity: .75,
	    backgroundColor: '#333333',
	    color: '#ffffff'
	},
    noticeDisplay: function(notice)
    {
        notice.css({ 'opacity': '0' }).fadeIn(jQuery.growl.settings.noticeFadeTimeout);
    },
    noticeRemove: function(notice, callback)
    {
        notice.animate({ opacity: '0', height: '0px' }, { duration: jQuery.growl.settings.noticeFadeTimeout, complete: callback });
    },
    noticeFadeTimeout: 'slow',
    displayTimeout: 3500,
    defaultImage: 'growl.jpg',
    defaultStylesheet: null,
    noticeElement: function(el)
    {
        $.growl.settings.noticeTemplate = $(el);
    }
};
})(jQuery);